<template>
  <am-container>
    <am-row>

      <!-- 全部作品、当前大赛作品、查询 -->
      <am-col :span="12">

        <div class="am-u-sm-12">
          <template v-if="gameID !== ''">
            <p v-if="isJoin === 0">你没有报名资格，请去<router-link to="/apply">报名</router-link></p>
            <p v-else>已确认报名资格</p>
          </template>
          <p v-else>当前没有进行中大赛，未开放报名</p>
        </div>

        <div class="am-u-sm-12 am-u-md-7">
          <am-radio-group custom-class="" v-model="label">
            <am-radio label="全部作品"></am-radio>
            <am-radio label="参赛中作品"></am-radio>
            <!-- <am-radio label="过审作品"></am-radio> -->
          </am-radio-group>
        </div>

        <div class="am-u-sm-12 am-u-md-5">
          <am-input placeholder="搜索作品名称" v-model="worksName"></am-input>
        </div>
      </am-col>

      <!-- 作品表格 -->
      <am-col :span="12">
        <div class="am-scrollable-horizontal">
          <am-table :data="tableData" :nowrap="true" :select="select" v-model="selectWorks">
            <am-table-column v-for="(item, index) in showCol" :key="index"
              :prop="item.prop"
              :label="item.label" />
          </am-table>
        </div>
      </am-col>

      <!-- 分页 -->
      <am-col :span="12">
        <am-pagination align="right"
          :total="page.res.total"
          :page-size="page.limit"
          :show-page-btn-count="page.btns"
          v-model="page.num"
          @change="pageChange" />
      </am-col>

    </am-row>
  </am-container>
</template>

<script>
let timer = false;

export default {
  name: 'works-table',
  data() {
    return {
      label: '全部作品',// 作品范围：全部作品、参赛中作品
      worksName: '',// 搜索作品名称
      page: {// 分页
        btns: 2,
        num: 1,// 当前页
        limit: 5,// 每页几条数据
        res: {
          total: 0,
          count: 0
        }
      },
      tableData: [],// 获取设计师作品
      showCol: [{// 表格需要显示的字段
        prop: 'name',
        label: '作品名称'
      }, {
        prop: 'statusName',
        label: '作品状态'
      }, {
        prop: 'createdOn',
        label: '上传日期'
      }, {
        prop: 'oper',
        label: '操作'
      }],


      /**
       * 属性非响应式使用
       */
      inGame: {
        '全部作品': -1,
        '参赛中作品': 1
      },

      /**
       * 后期
       */
      houses: [],
      selectWorks: [],
      select: false,// 新增全屋定制，可选状态

      // gameID: this.$store.getters.gameID,
      // isJoin: this.$store.state.designer.isJoin
    }
  },
  computed: {
    /**
     * v-if使用多个computed会出错
     */
    isJoin() {
      return this.$store.state.designer.isJoin;
    },
    gameID() {
      return this.$store.getters.gameID;
    },

    gameStatus() {
      /**
       * 大赛阶段
       * 1-报名
       * 2-投票
       * 3-评选
       * 4-公示
       */
      return this.$store.state.game.info.stage;
    }
  },
  methods: {
    async ready() {
      let data = await this.loadData();
      this.initTableField(data);
    },
    /**页面数据初始化 */
    loadData() {
      return this.initTableData()
    },
    /**表格分页数据 */
    initTableData() {
      return new Promise((resolve, reject) => {
        this.goSearch().then(data => resolve(data));
      });
    },

    /**查询一页 */
    goSearch() {
      return new Promise((resolve, reject) => {
        this.dgpost(this.api.GETWORKSDATAPAGE, {
          inGame: this.inGame[this.label],
          designerID: +this.designerID,
          pageNum: +this.page.num,
          numPerPage:　+this.page.limit,
          worksName: this.worksName
        }).then(res => {
          if(res.data.data.length < 1) {
            console.log('没有作品');
            resolve([]);
          } else {
            this.page.res = res.data.data.page;
            resolve(res.data.data.work);
          }
        }).catch(err => {
          this.$message({
            title: '加载作品数据发生错误',
            type: 'error',
            message: err.msg,
            closeable: true
          });
        })
      });
    },

    /**表格字段渲染 */
    initTableField(tableData) {

      const that = this;

      // 添加操作按钮
      tableData.forEach(item => {
        let leftBtn;
        /**
         * 大赛是否处于可报名阶段
         * 设计师有无参赛资格
         * 作品是否处于可参赛状态
         */
        if(this.gameStatus !== '1' && this.gameStatus !== '2') {// 不可报名
          leftBtn = '作品参赛已结束';
        } else {// 可以报名
          if(this.isJoin === 0) {// 没有参赛资格，需要报名
            leftBtn = '未报名';

            item.statusName = '新增';
            item.oper = {
              render(h, fileds, prop, index) {
                return (
                  <am-button-group size="xs">
                    <am-button round on-click={e => that.$router.push('/apply')}>{ leftBtn }</am-button>
                    <am-button round color="secondary" on-click={e => that.checkWorks(item)}>查看</am-button>
                  </am-button-group>
                );
              }
            }
          } else {

            /**
             * item.status
             * 字符串型
             * 0-新增
             * 1-审核
             * 2-通过
             * 3-不通过
             */

            const btnOper = {
              '0': '选择参赛',
              '1': '已参赛',
              '2': '通过',
              '3': '不通过'
            }
            leftBtn = btnOper[item.status];

            const statusName = {
              '0': '新增',
              '1': '待审核',
              '2': '通过',
              '3': '不通过'
            }
            item.statusName = statusName[item.status];


            item.oper = {
              render(h, fileds, prop, index) {
                return (
                  <am-button-group size="xs">
                    <am-button round disabled={fileds.status.value !== '0'} on-click={e => that.entry(fileds.status.value, item)}>{ leftBtn }</am-button>
                    <am-button round color="secondary" on-click={e => that.checkWorks(item)}>查看</am-button>
                  </am-button-group>
                );
              }
            }
          }
        }
      });

      // 需一次性设置好后才赋值
      this.tableData = tableData;
    },


    /**
     * 表格按钮动作
     */
    /**查看作品 */
    checkWorks(item) {
      this.$router.push('/worksDetail/' + item.ID);
    },
    /**作品参赛 */
    entry(status, item) {

      if(status === '0') {
        let that = this;

        this.dgpost(this.api.ENTRYGAME, {
          gameID: +this.gameID,
          worksID: +item.ID
        }).then(() => {
          item.oper = {
            render(h, fileds, prop, index) {
              return (
                <am-button-group size="xs">
                  <am-button round on-click={e => that.entry(item)} disabled>已参赛</am-button>
                  <am-button round color="secondary" on-click={e => that.checkWorks(item)}>查看</am-button>
                </am-button-group>
              );
            }
          }
          item.statusName = '待审核';
        });
      }
    },

    /**分页动作 */
    pageChange(pageNum) {
      this.page.num = pageNum;
      this.ready();
    },


    /**新增一组全屋定制 */
    // addHouse() {
    //   this.select = true;
    //   this.houses.push([]);
    // },
    /**删除一个标签 */
    // removeTag(index, house) {
    //   house.splice(index, 1)
    // }
  },
  watch: {
    selectWorks(val) {
      this.houses[this.houses.length - 1] = val;
    },
    label(val) {
      this.ready();
    },
    worksName(val) {
      if(!timer) {
        timer = true;
        setTimeout(() => {
          this.ready();// 重新加载表格
          timer = false;
        }, 899);// 性能处理
      }
    }
  },
  props: {
    designerID: String
  },
  mounted() {
    this.ready();
  }
}
</script>
